<script setup lang="ts">
import ChatList from "./ChatList.vue";

import ChatFrame from "./ChatFrame.vue";
import {ref} from "vue";
import FriendsList from "./FriendsList.vue";
import TitleBarBtnGroup from "./TitleBarBtnGroup.vue";
import {platform} from "@tauri-apps/api/os";
import {ChatItem, UserInfo} from "common";

const title = ref('WeCheat')


const activeIndex = ref(0)
const chatFrame = ref()
const isMacOS = ref(false)
const chatList = ref()
platform().then(value => {
  isMacOS.value=value==='darwin'
})
const updateActiveIndex = (index:number) => {
  console.log(index)
  activeIndex.value=index
}

const onMessage = (message:any)=>{
  chatList.value.handleMessage(message)
  chatFrame.value.handleMessage(message)
}

const handleChat = (chatItem:ChatItem)=>{
  console.log(chatItem)
  title.value=chatItem.name;
  chatFrame.value.openChat(chatItem)
}

const handleFriendChat = (userInfo:UserInfo) => {
  console.log(userInfo)
  title.value=userInfo.name;
  chatFrame.value.openChat({targetType:userInfo.group?1:0,friendId:userInfo.userId,avatar:userInfo.avatar})
}

const init = ()=>{
  chatList.value.loadChatList()
}


defineExpose({updateActiveIndex,onMessage,init})

</script>

<template>
<div class="main-panel">
  <chat-list ref="chatList" v-if="activeIndex===0" @handle-chat="handleChat"></chat-list>
  <friends-list v-if="activeIndex===1" @handle-chat="handleFriendChat"></friends-list>
  <div class="content">
    <div class="title-bar" data-tauri-drag-region>
      <div class="title" data-tauri-drag-region>
        {{title}}
      </div>
      <div>
        <TitleBarBtnGroup v-show="!isMacOS" :exit-on-close="true" :need-confirm="true"></TitleBarBtnGroup>
        <div class="tool-bar" data-tauri-drag-region>
          <v-icon icon="mdi-dots-horizontal"></v-icon>
        </div>
      </div>
    </div>
    <chat-frame ref="chatFrame">
    </chat-frame>

  </div>

</div>
</template>

<style scoped lang="scss">
.main-panel{
  background: white;
  flex: 1;
  height: 100%;
  overflow: hidden;
  display: flex;
  .content{
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    .title-bar{
      height: 60px;
      display: flex;
      align-items: center;
      border-bottom: solid 1px #ddd;
      .title{
        margin-left: 20px;
        flex: 1;
        font-size: 18px;
      }

    }

    .tool-bar{
      height: 30px;
      text-align: right;
      padding-right: 10px;
    }
  }

}
</style>
